<template>
  <div class="login_container">
    <div class="login_form"> 
      <h3 class="title">后台管理系统</h3>
      <el-form ref="formRef" :model="loginForm" > 
          <el-form-item>
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
            >
              <template #prefix>
                <icon-ep-search></icon-ep-search>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="loginForm.password"
              placeholder=" 请输入密码"
              type="password"
              show-password
            >
              <template #prefix>
                <icon-ep-lock></icon-ep-lock>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="remember">
              <el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" />
              <el-text type="primary">忘记密码？</el-text>
            </div>
          </el-form-item>
          <el-divider>
            其他登录方式
          </el-divider>
          <div class="otherLogin">
            <icon-ep-apple />
            <icon-ep-ChromeFilled />
            <icon-ep-cherry />
          </div>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" class="loginBtn">登录</el-button>
          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { login } from '@/api/auth';
import { setToken } from '@/utils/token'
import { searchSelfRouter } from '@/api/user';
import { useMenuStore } from '@/stores/menu';
import { useRouter } from 'vue-router'
  const router = useRouter();
  const menuStore = useMenuStore();
  const loginForm = ref({
    username: 'admin',
    password: '123456',
    rememberMe: false
  })
  function handleLogin(){
    login(loginForm.value)
      .then(
        data=>{
          if(data.code == 200){
                //将token存储到SessionStorage中
                setToken('token',data.data)
                //console.log(data.data)
                //查询用户的权限和菜单
                searchSelfRouter().then(data => { 
                    if(data.code == 200){
                        console.log("菜单权限==========》"+data.data)
                        //存储到pinia中
                        menuStore.setMenuList(data.data)
                        //跳转到首页
                        router.push('/index')
                    }
                    

                })
            }
        }
      ).catch(error=>{
        console.log("登录失败",error);
    })
  }
</script>

<style lang="scss" scoped>
  .remember{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .otherLogin{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
  }
  .login_container{
    background-image: url("@/assets/img/login_bg.jpg");
    background-size: 100% 100%;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    .login_form{ 
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      background-color: white;
      .title{
        margin-bottom: 20px;
      }
      .el-form{
        width: 60%;
        .el-form-item{
          width: 100%;
        }
        .loginBtn{
          width: 100%;
          margin: 10px auto;
        }
      }
    }
  }
</style>